<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  [nzVisible]="visible"
  nzPlacement="right"
  i18n-nzTitle="@@iam.team.member-drawer.title"
  nzTitle="Add team member"
  [nzWidth]="500"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="memberForm" (ngSubmit)="doSubmit()" nzLayout="vertical">
      <!-- email -->
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@iam.team.member-drawer.email">Email</nz-form-label>
        <nz-form-control nzErrorTip="Invalid Email" i18n-nzErrorTip="@@iam.team.member-drawer.invalid-email">
          <input type="text" nz-input formControlName="email" placeholder="Email" i18n-placeholder="@@iam.team.member-drawer.email-placeholder"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzRequired><ng-container i18n="@@iam.team.member-drawer.permissions">Permissions</ng-container> <span style="margin-left: 4px; color: #ff4d4f" *ngIf="isPermissionInvalid" i18n="@@iam.team.member-drawer.policy-group-set-at-least-one">(Policy and group cannot be both empty)</span></nz-form-label>
        <nz-form-control>
            <nz-select
              class="nz-select-40"
              nzShowSearch
              nzServerSearch
              i18n-nzPlaceholder="@@iam.team.member-drawer.policy-placeholder"
              nzPlaceHolder="Policy"
              (nzOnSearch)="getPolicies($event)"
              formControlName="policyId">
              <ng-container *ngFor="let policy of policies.items">
                <nz-option nzCustomContent *ngIf="!isPoliciesLoading" [nzLabel]="policy.name" [nzValue]="policy.id">
                  <i *ngIf="policy.type === 'SysManaged'" style="color: #28a17d;" nz-icon nzType="star" nzTheme="outline"></i>
                  {{ policy.name }}
                </nz-option>
              </ng-container>
              <nz-option *ngIf="isPoliciesLoading" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> <ng-container i18n="@@common.loading">Loading...</ng-container>
              </nz-option>
            </nz-select>
          </nz-form-control>
        <nz-form-control style="margin-top: 10px;">
            <nz-select
              class="nz-select-40"
              nzShowSearch
              nzServerSearch
              i18n-nzPlaceholder="@@iam.team.member-drawer.group-placeholder"
              nzPlaceHolder="Group"
              (nzOnSearch)="getGroups($event)"
              formControlName="groupId">
              <ng-container *ngFor="let group of groups.items">
                <nz-option *ngIf="!isGroupsLoading" [nzLabel]="group.name" [nzValue]="group.id"></nz-option>
              </ng-container>
              <nz-option *ngIf="isGroupsLoading" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> <ng-container i18n="@@common.loading">Loading...</ng-container>
              </nz-option>
            </nz-select>
          </nz-form-control>
      </nz-form-item>
    </form>
    <button (click)="doSubmit()" nz-button class="submit-btn" [nzType]="'primary'" [nzLoading]="isLoading" i18n="@@common.save">Save</button>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

